<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数的封装</title>
</head>
<body>
<div></div>
<p></p>
<span></span>
<div></div>
<p></p>
<span></span>
<script>
    //引入qsa方法
//    var nodes = document.querySelectorAll('div,p');
    //在开发中 该方法可能会频繁使用

    //当代码量越来越大的时候，方法的名字越长，出现的错误率越高，因此会考虑使用较为短的名字来代替
    //同时，代码在开发环境中是用于阅读和维护的，因此代码越详尽越好
    //但是生产环境中，越进件越好，因此会考虑代码的压缩混淆

    //局部变量可以压缩，方法不能压缩.如下例子：
  /*  function func(parameter){
        parameter.xxx = ccc;
    }
    function f(p){
        p.xx = ss;
    }*/

    function select(selector){
        return document.querySelectorAll(selector);
    }
    var nodes = select('div,p');

    //如果自己写项目，作为工具使用
    //一些常用手段，命名空间模式的介绍
//    var J = {};
//    J.qsa = function(){
//        return document.querySelectorAll(selector);
//    };
//    var qsa = 123;
    //命名空间模式
    //namespace mode

    //引入qsa方法
    //因为在开发中获取标签的方法可能会频繁使用
    //当代码量越来越大的时候，方法的名字越长，出现的错误率越高，因此会考虑使用较为短的名字来替换
    //但是在生产环境中，越精简越好，因此会考虑代码的压缩混淆

    //第二改进
    function select(selector){
        return document.querySelectorAll(selector);
    }

    var nodes = select('div,p');
    //获取到节点根据跟剧节点名字来判断节点类型然后分别给不同的边框
    for(var i=0;i<nodes.length;i++){
        /*if(nodes[i].nodeName=='DIV'){
            nodes[i].style.border = '2px solid green';
        }
        if(nodes[i].nodeName=='P'){
            nodes[i].style.border = '4px solid yellow';
        }*/
//        if(nodes[i].nodeName=='DIV')?''//abort
    }

    //第三改进
    //如果是自己写项目 作为工具方法，可以自己封装
    //例如命名空间模式
    var J = {};
    J.qsa = function(selector){
        return document.querySelectorAll(selector);
    }
</script>
</body>
</html>